<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" :label="$t('module.university.header.name')">
          <el-input v-model="search.name" :placeholder="$t('module.university.header.name_placeholder')" />
        </el-form-item>
        <el-form-item prop="" :label="$t('module.university.header.province')">
          <el-input v-model="search.province" :placeholder="$t('module.university.header.province_placeholder')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">{{ $t('search') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column fixed type="expand">
          <template slot-scope="props">
            <el-form :inline="true">
              <el-form-item label="院校性质">
                <span>{{ props.row.academy_attr }}</span>
              </el-form-item>
              <el-form-item label="院校类型">
                <span>{{ props.row.academy_level }}</span>
              </el-form-item>
              <el-form-item label="所属省份">
                <span>{{ props.row.province }}</span>
              </el-form-item>
              <el-form-item label="院校网站">
                <span>{{ props.row.website }}</span>
              </el-form-item>
              <el-form-item label="院校电话">
                <span>{{ props.row.telephone }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="academy_name" :label="$t('module.university.table.name')" fixed />

        <el-table-column :label="$t('op')" width="100">
          <template slot-scope="s">
            <el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit(s)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        small
        class="pagination"
        :current-page="table.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="table.size"
        layout="prev, pager, next"
        :total="table.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <div>
      <el-dialog v-if="editDialog.visible" title="编辑院校" :visible.sync="editDialog.visible" center fullscreen>
        <el-form ref="form" label-width="80px" :rules="formRules" :model="form">
          <el-tabs v-model="activeTabName">
            <el-tab-pane label="院校信息" name="first">
              <el-form-item label="院校名称" prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="院校性质" prop="attr">
                <el-input v-model="form.attr" />
              </el-form-item>
              <el-form-item label="院校类型" prop="level">
                <el-input v-model="form.level" />
              </el-form-item>
              <el-form-item label="院校特色" prop="feature">
                <el-input v-model="form.feature" />
              </el-form-item>
              <el-form-item label="院校地址" prop="address">
                <el-input v-model="form.address" />
              </el-form-item>
              <el-form-item label="院校网站" prop="website">
                <el-input v-model="form.website" />
              </el-form-item>
              <el-form-item label="院校电话" prop="telephone">
                <el-input v-model="form.telephone" />
              </el-form-item>
              <el-form-item label="所属城市" prop="area">
                <el-cascader
                  v-model="form.area"
                  style="width: 100%"
                  placeholder="请输入城市"
                  :options="areas"
                  filterable
                />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="院校介绍" name="second">
              <el-form-item label="院校介绍" prop="introduction">
                <tinymce ref="tinymce1" v-model="form.introduction" :height="300" />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="招生简章" name="third">
              <el-form-item label="招生简章" prop="catalog">
                <tinymce ref="tinymce2" v-model="form.catalog" :height="300" />
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="handleUpdate">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import tinymce from '@/components/Tinymce'
import { getList, update } from '../../api/academy'
import { areas } from '../../api/app'
export default {
  components: { tinymce },
  data() {
    const checkPhone = (rule, value, callback) => {
      const regex = new RegExp('(^((010)|(02[0-9])|(((03[134579])|(04[1-8])|(05[1-9])|(06[369])|(07[0-9])|(08[0-9])|(09[0-9]))[0-9]))[-][0-9]{8}$)|(^1[3-9][0-9][0-9]{8}$)')
      if (value === '') {
        callback()
      } else if (!regex.test(value)) {
        callback('电话格式错误')
      } else {
        callback()
      }
    }
    return {
      table: {
        data: [],
        total: 0,
        page: 1,
        size: 10,
        loading: false,
        search: ''
      },
      areas: [],
      search: {
        province: '',
        name: ''
      },
      editDialog: {
        visible: false
      },
      currentId: 0,
      activeTabName: 'first',
      formRules: {
        name: [{ required: true, message: '请输入院校名称', trigger: 'change' }],
        website: [{ type: 'url', message: '请输入合法的网址', trigger: 'change' }],
        telephone: [{ validator: checkPhone, trigger: 'change' }]
      },
      form: {
        name: '',
        attr: '',
        level: '',
        feature: '',
        address: '',
        website: '',
        area: [],
        introduction: '',
        catalog: '',
        telephone: ''
      }
    }
  },
  mounted() {
    this.getAreas()
    this.getList()
  },
  methods: {
    getAreas() {
      areas().then((res) => {
        this.areas = res
      })
    },
    getList() {
      this.table.loading = true
      getList({
        limit: this.table.size,
        page: this.table.page,
        name: this.search.name,
        province: this.search.province
      }).then(res => {
        this.table = Object.assign({}, this.table, {
          total: res.total,
          data: res.data
        })
      }).finally(() => {
        this.table.loading = false
      })
    },
    handleCurrentChange(page) {
      this.table = Object.assign({}, this.table, {
        page: page
      })
      this.getList()
    },
    handleSizeChange(size) {
      this.table = Object.assign({}, this.table, {
        size: size
      })
      this.getList()
    },
    handleSearch() {
      this.table = Object.assign({}, this.table, {
        search: ''
      })
      this.getList()
    },
    handleActive(scope) {

    },
    handleEdit(scope) {
      this.currentId = scope.row.id
      this.form.name = scope.row.academy_name
      this.form.attr = scope.row.academy_attr
      this.form.level = scope.row.academy_level
      this.form.feature = scope.row.feature
      this.form.address = scope.row.address
      this.form.website = scope.row.website
      this.form.area = [scope.row.province, scope.row.city]
      this.form.introduction = scope.row.introduction
      this.form.telephone = scope.row.telephone
      this.form.catalog = scope.row.catalog
      this.editDialog.visible = true
    },
    handleUpdate() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$confirm('确认修改该学校的信息并提交审核吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            customClass: 'confirmDialog',
            center: true,
            type: 'warning'
          }).then(() => {
            let data
            if (this.form.area.length === 2) {
              data = Object.assign({}, this.form, {
                province: this.form.area[0],
                city: this.form.area[1]
              })
            } else {
              data = Object.assign({}, this.form, {
                province: '',
                city: ''
              })
            }

            update(data, this.currentId).then(res => {
              this.editDialog.visible = false
              this.$message.success('请等待审核完成')
            }).catch((err) => {
              console.log(err)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
        } else {
          this.$message.error('填写有误')
        }
      })
    }
  }
}
</script>

<style scoped>
  .pagination {
    margin-top: 10px;
  }
</style>
